<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>宿舍管理</el-breadcrumb-item>
      <el-breadcrumb-item>维修费用总列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!--Tab-->
      <el-tabs v-model="activeName"
               @tab-click="changeArea"
               type="card">
        <el-tab-pane label="桃园"
                     name="桃园">
          <el-tabs v-model="towerIds"
                   @tab-click="getTowerDamageCotsList"
                   ref="tabsRef">
            <el-tab-pane :label="item.towerName"
                         ref="tabPaneRef"
                         v-for="item in taoyuan"
                         :key="item.towerId"
                         :name="item.towerName">
              <!--学生列表区域-->
              <el-table :data="damageCostList"
                        ref="visitersRef"
                        highlight-current-row>
                <el-table-column type="index"
                                 :index="indexMethod"></el-table-column>
                <el-table-column label="上报人"
                                 prop="name"></el-table-column>
                <el-table-column label="维修人"
                                 prop="serviceman"></el-table-column>
                <el-table-column label="被访宿舍号"
                                 prop="dorm"></el-table-column>
                <el-table-column label="维修物品"
                                 prop="repalce"></el-table-column>
                <el-table-column label="费用"
                                 prop="costs"></el-table-column>
                <el-table-column label="更换数量"
                                 min-width='50px'
                                 prop="count"></el-table-column>
                <el-table-column label="维修完成时间"
                                 min-width='100px'
                                 prop="time"></el-table-column>
                <el-table-column label="查看上报信息"
                                 min-width='130px'>
                  <template slot-scope="scope">
                <el-popover
                    placement="left"
                    title="当前行损坏上报信息"
                    width="900"
                    trigger="click"
                    :content="scope.name">
                   <el-table :data="damageUpInfo"
                ref="towerRef"
                highlight-current-row>
        <el-table-column type="index"
                         :index="indexMethod"></el-table-column>
        <el-table-column label="所在楼宇"
                         prop="tower"></el-table-column>
        <el-table-column label="宿舍号"
                         prop="dorm"></el-table-column>
        <el-table-column label="学号"
                         prop="studentNumber"></el-table-column>
        <el-table-column label="姓名"
                         prop="name"></el-table-column>
        <el-table-column label="班级"
                         prop="class"></el-table-column>
        <el-table-column label="损坏物品"
                         prop="article"></el-table-column>
        <el-table-column label="描述"
                         min-width='140px'
                         prop="desc"></el-table-column>
        <el-table-column label="电话"
                         prop="tel"></el-table-column>
        <el-table-column label="上报时间"
                         min-width='70px'
                         prop="time"></el-table-column>
        <el-table-column label="完成时间"
                         min-width='70px'
                         prop="finishTime"></el-table-column>
      </el-table>
                    <el-button slot="reference" type="primary" @click="getDamageUpInfo(scope.row)">查看上报信息</el-button>
                  </el-popover>
                  <el-button type="warning" @click="openDialog(scope.row)">修改</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="dataList.pagenum"
                           :page-sizes="[1, 3, 5, 7]"
                           :page-size="dataList.pagesize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="兰园"
                   @tab-click="getTowerDamageCotsList"
                     name="兰园">
          <el-tabs v-model="towerIds">
            <el-tab-pane :label="item.towerName"
                         v-for="item in lanyuan"
                         :key="item.towerId"
                         :name="item.towerName">
              <!--学生列表区域-->
              <el-table :data="damageCostList"
                        ref="visitersRef"
                        highlight-current-row>
                <el-table-column type="index"
                                 :index="indexMethod"></el-table-column>
                <el-table-column label="上报人"
                                 prop="name"></el-table-column>
                <el-table-column label="维修人"
                                 prop="serviceman"></el-table-column>
                <el-table-column label="被访宿舍号"
                                 prop="dorm"></el-table-column>
                <el-table-column label="维修物品"
                                 prop="repalce"></el-table-column>
                <el-table-column label="费用"
                                 prop="costs"></el-table-column>
                <el-table-column label="更换数量"
                                 min-width='50px'
                                 prop="count"></el-table-column>
                <el-table-column label="维修完成时间"
                                 min-width='100px'
                                 prop="time"></el-table-column>
                <el-table-column label="查看上报信息"
                                 min-width='130px'>
                  <template slot-scope="scope">
                <el-popover
                    placement="left"
                    title="当前行损坏上报信息"
                    width="900"
                    trigger="click"
                    :content="scope.name">
                   <el-table :data="damageUpInfo"
                ref="towerRef"
                highlight-current-row>
        <el-table-column type="index"
                         :index="indexMethod"></el-table-column>
        <el-table-column label="所在楼宇"
                         prop="tower"></el-table-column>
        <el-table-column label="宿舍号"
                         prop="dorm"></el-table-column>
        <el-table-column label="学号"
                         prop="studentNumber"></el-table-column>
        <el-table-column label="姓名"
                         prop="name"></el-table-column>
        <el-table-column label="班级"
                         prop="class"></el-table-column>
        <el-table-column label="损坏物品"
                         prop="article"></el-table-column>
        <el-table-column label="描述"
                         min-width='140px'
                         prop="desc"></el-table-column>
        <el-table-column label="电话"
                         prop="tel"></el-table-column>
        <el-table-column label="上报时间"
                         min-width='70px'
                         prop="time"></el-table-column>
        <el-table-column label="完成时间"
                         min-width='70px'
                         prop="finishTime"></el-table-column>
      </el-table>
                    <el-button slot="reference" type="primary" @click="getDamageUpInfo(scope.row)">查看上报信息</el-button>
                  </el-popover>
                  <el-button type="warning" @click="openDialog(scope.row)">修改</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="dataList.pagenum"
                         :page-sizes="[1, 3, 5, 7]"
                         :page-size="dataList.pagesize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="荔园"
                   @tab-click="getTowerDamageCotsList"
                     name="荔园">
          <el-tabs v-model="towerIds">
            <el-tab-pane :label="item.towerName"
                         v-for="item in liyuan"
                         :key="item.towerId"
                         :name="item.towerName">
              <!--学生列表区域-->
              <el-table :data="damageCostList"
                        ref="visitersRef"
                        highlight-current-row>
                <el-table-column type="index"
                                 :index="indexMethod"></el-table-column>
                <el-table-column label="上报人"
                                 prop="name"></el-table-column>
                <el-table-column label="维修人"
                                 prop="serviceman"></el-table-column>
                <el-table-column label="被访宿舍号"
                                 prop="dorm"></el-table-column>
                <el-table-column label="维修物品"
                                 prop="repalce"></el-table-column>
                <el-table-column label="费用"
                                 prop="costs"></el-table-column>
                <el-table-column label="更换数量"
                                 min-width='50px'
                                 prop="count"></el-table-column>
                <el-table-column label="维修完成时间"
                                 min-width='100px'
                                 prop="time"></el-table-column>
                <el-table-column label="查看上报信息"
                                 min-width='130px'>
                  <template slot-scope="scope">
                <el-popover
                    placement="left"
                    title="当前行损坏上报信息"
                    width="900"
                    trigger="click"
                    :content="scope.name">
                   <el-table :data="damageUpInfo"
                ref="towerRef"
                highlight-current-row>
        <el-table-column type="index"
                         :index="indexMethod"></el-table-column>
        <el-table-column label="所在楼宇"
                         prop="tower"></el-table-column>
        <el-table-column label="宿舍号"
                         prop="dorm"></el-table-column>
        <el-table-column label="学号"
                         prop="studentNumber"></el-table-column>
        <el-table-column label="姓名"
                         prop="name"></el-table-column>
        <el-table-column label="班级"
                         prop="class"></el-table-column>
        <el-table-column label="损坏物品"
                         prop="article"></el-table-column>
        <el-table-column label="描述"
                         min-width='140px'
                         prop="desc"></el-table-column>
        <el-table-column label="电话"
                         prop="tel"></el-table-column>
        <el-table-column label="上报时间"
                         min-width='70px'
                         prop="time"></el-table-column>
        <el-table-column label="完成时间"
                         min-width='70px'
                         prop="finishTime"></el-table-column>
      </el-table>
                    <el-button slot="reference" type="primary" @click="getDamageUpInfo(scope.row)">查看上报信息</el-button>
                  </el-popover>
                  <el-button type="warning" @click="openDialog(scope.row)">修改</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="dataList.pagenum"
                         :page-sizes="[1, 3, 5, 7]"
                         :page-size="dataList.pagesize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  <!--修改弹出框-->
  <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
  <!--Diage内容主体区域-->
      <el-form ref="costsForm"
               :model="costsForm"
               :rules="rule"
               label-width="80px">
        <el-form-item label="楼宇"
                      prop="tower">
          <el-input v-model="costsForm.tower"></el-input>
        </el-form-item>
        <el-form-item label="宿舍号"
                      prop="dorm">
          <el-input v-model="costsForm.dorm"></el-input>
        </el-form-item>
        <el-form-item label="上报人"
                      prop="name">
          <el-input v-model="costsForm.name"></el-input>
        </el-form-item>
        <el-form-item label="维修人"
                      prop="serviceman">
          <el-input v-model="costsForm.serviceman"></el-input>
        </el-form-item>
        <el-form-item label="物品更换"
                      prop="repalce">
          <el-input v-model="costsForm.repalce"></el-input>
        </el-form-item>
        <el-form-item label="数量"
                      prop="count">
          <el-input-number v-model="costsForm.count"
                           :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="费用"
                      prop="costs">
          <el-input v-model="costsForm.costs"></el-input>
        </el-form-item>
      </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="editCostsInfo">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
import { formDate } from 'commonjs/formatDate.js'
import { allTowerMixin } from 'commonjs/allTowerMixin.js'
export default {
  name: 'dormAllDamageCost',
  props: [''],
  data () {
    return {
      damageCostList: [],
      damageUpInfo: [],
      costForm: [],
      costsForm: {
        dorm: '',
        tower: '',
        name: '',
        serviceman: '',
        repalce: '',
        count: 0,
        costs: 0,
        _id: ''
      },
      dialogFormVisible: false,
      // 表单规则
      rule: {
        serviceman: [
          { required: true, message: '请输入维修员姓名', trigger: 'blur' }
        ]
      }
    }
  },

  components: {},

  computed: {},

  created () {
    this.getDamageCostList(this.towerIds)
  },

  mounted () {},

  methods: {
    // 切换桃园、兰园、荔园
    changeArea (tab) {
      // console.log(tab)
      this.activeName = tab.label
      this.towerIds = this.activeName + '1'
      this.getDamageCostList(this.towerIds)
    },
    // 获取选中楼宇维修费用信息
    getTowerDamageCotsList (tab) {
      this.towerIds = tab.name
      this.getDamageCostList(tab.name)
    },
    handleSizeChange (size) {
      this.dataList.pagesize = size
      this.getDamageCostList(this.towerIds)
    },
    handleCurrentChange (currentPage) {
      this.dataList.pagenum = currentPage
      this.getDamageCostList(this.towerIds)
    },
    // 获取维修费用列表
    async getDamageCostList (tower) {
      // console.log(tower)
      const { data: res } = await this.$axios.get('/damage/findCostInfo', {
        params: {
          tower,
          pagenum: this.dataList.pagenum,
          pagesize: this.dataList.pagesize
        }
      })
      // console.log(res)
      if (res.meta.code === 200) {
        res.result_cost.map(valid => {
          valid.time = formDate(valid.time)
          valid.costs = '￥' + valid.costs
        })
        this.damageCostList = res.result_cost
        this.total = res.total
        // console.log(this.damageCostList)
      } else {
        this.$message.errortype = 'primary'(res.meta.msg)
      }
    },
    // 查看上报信息
    async getDamageUpInfo (row) {
      const { data: res } = await this.$axios.get('/damage/serchFixMan', {
        params: {
          _id: row.damageId
        }
      })
      if (res.meta.code === 200) {
        res.result.map(valid => {
          valid.time = formDate(valid.time)
          valid.finishTime = formDate(valid.finishTime)
        })
        this.damageUpInfo = res.result
      } else {
        this.$message.waring(res.meta.msg)
      }
    },
    // 打开dialog
    openDialog (row) {
      this.costsForm._id = row._id
      this.costsForm.dorm = row.dorm
      this.costsForm.tower = row.tower
      this.costsForm.name = row.name
      this.costsForm.serviceman = row.serviceman
      this.costsForm.repalce = row.repalce
      this.costsForm.count = row.count
      this.costsForm.costs = row.costs.slice(1)
      this.dialogFormVisible = true
    },
    // 修改维修费用信息
    async editCostsInfo () {
      this.$refs.costsForm.validate(async valid => {
        if (!valid) return 0
        const { data: res } = await this.$axios.post('/damage/editCots', {
          _id: this.costsForm._id,
          serviceman: this.costsForm.serviceman,
          repalce: this.costsForm.repalce,
          count: this.costsForm.count,
          costs: this.costsForm.costs
        })
        // console.log(res)
        if (res.meta.code !== -1) {
          this.$message.success(res.meta.msg)
          this.getDamageCostList(this.towerIds)
          this.dialogFormVisible = false
        }
      }
      )
    }
  },

  mixins: [allTowerMixin]

}

</script>
<style lang='' scoped>

</style>
